<template>

  <div class="news-detail-container" ref="wrapper">
    <div class="news-container">
      <div class="news-title">{{newsDetail.title}}</div>
      <div class="news-time"><i class="icon-shijian" v-show="newsDetail.addtime"></i>{{newsDetail.addtime}}</div>
      <div class="news-detail" v-html="newsDetail.detail" @load.capture="load"></div>
    </div>
  </div>

</template>

<script>
import { getNewsDetail } from 'api/main'
import BScroll from 'better-scroll'

export default {
  data() {
    return {
      newsId: String,
      newsDetail: {},
    }
  },
  created() {
    this._getNewsDetail(this.$route.params.newsId)
  },
  methods: {
    load() {
      this.scroll.refresh();
    },
    _getNewsDetail(id) {
      getNewsDetail(id).then((res) => {
        // console.log(res)
        this.newsDetail = res
      })
    }
  },
  mounted() {
    if (this.scroll) {
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    } else {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
        })
      })
    }
  }
}
</script>


<style scoped  scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .news-detail-container
    position: fixed;
    z-index: 100
    top: 0px
    right: 0px
    bottom: 0px
    left: 0px
    background-color: #fff
    overflow: hidden;
    padding: 20px 10px 10px 10px
    overflow: hidden
    .news-container
      width: 100%
      overflow: hidden
      .news-title
        font-size: 25px
        height: 56px
        line-height: 28px
        line-no-wrap(2)
      .news-time
        margin-top: 10px
        height: 20px
        line-height: 20px
        color: #888
        i
          margin-right: 5px
      .news-detail
        margin-top: 10px

</style>
